---
layout:           default
---

{{ content }}

<script type="text/javascript">
    $(function(){
        function animateBar($item,noAni){
            var spanLeft = $item.find('span').offset().left;
            var conLeft = $item.parent().offset().left;
            var left = spanLeft - conLeft;
            var width = $item.find('span').width() + 8;

            if(noAni){
                $('#cateBar').css({left:left,width:width})
            }else{
                $('#cateBar').stop().animate({left:left,width:width},300)
            }
        }

        var waitForFinalEvent = (function () {
            var timers = {};
            return function (callback, ms, uniqueId) {
                if (!uniqueId) {
                    uniqueId = "Don't call this twice without a uniqueId";
                }
                if (timers[uniqueId]) {
                    clearTimeout (timers[uniqueId]);
                }
                timers[uniqueId] = setTimeout(callback, ms);
            };
        })();

        $('.artical-cate li').mouseenter(function(){
            animateBar($(this));
        }).mouseleave(function(){
            animateBar($('.artical-cate .on'));
        });

        $(window).resize(function(e){
            waitForFinalEvent(function(){
                animateBar($('.artical-cate .on'));
            })
        })
        animateBar($('.artical-cate .on'),true);
    });
</script>
